<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyWords" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表:优秀实践，copy domain修改列表-->
    <el-table :data="permissions" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="240" sortable>
      </el-table-column>
      <el-table-column prop="url" label="资源地址" width="380" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="权限编码" sortable>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!--			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page="query.currentPage" :page-size="query.pageSize" :total="pageData.total" style="float:right;">
            </el-pagination>-->
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="totals" style="float:right;">
      </el-pagination>
    </el-col>

  </section>
</template>

<script>
export default {
  data() {
    return {
      //分页显示所属数据
      permissions: [],
      listLoading: false,
      currentPage: 1,
      pageSize: 5,
      totals: 0,

      //高级查询所需数据
      keyWords: '',
    }
  },
  methods: {
    search(){
      //修改页码
      this.currentPage =1;
      //改查询条件=双向绑定输入时自动改变，只需要重新查询一次就ok
      this.getPermissions();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPermissions();
    },
    //获取权限列表
    getPermissions() {
      this.listLoading = true; //忙等框
      let para = {
        pageSize:this.pageSize,
        currentPage:this.currentPage,
        keyWords:this.keyWords,
      }
      this.listLoading = false; //关闭忙等框
      this.$http.post("/permission",para)
          .then(res => {
            this.totals = res.data.totals;
            this.permissions = res.data.data;
          }).catch(res=>{
        /* alert("抱错了！");*/
        this.$message({
          message:"系统繁忙，请稍后再试！",
          type:"error"
        })
      })

    }
  },
  mounted() {
    this.getPermissions();
  }
}

</script>

<style scoped>

</style>